<template>
  <div class="collagePersonsList" v-if="!$isWxAppIos() && collage && collageListLoop.length > 0">
    <div class="c-bg-white c-ph24 c-pt24" v-if="collage.collageGroup != null && collage.isCollageOnline == 1">
      <div class="c-flex-row c-justify-sb c-pb28">
        <div class="c-fs22 c-fc-xblack">以下小伙伴正在拼团</div>
        <div class="c-fs22 c-fc-gray c-pl16 c-w0 c-flex-grow1" v-if="collage.collageGroupType == 1">参团价:<span class="fc-benefit">{{'￥' | iosPriceFilter}}{{Number(collage.playersPrice).toFixed(2)}}</span></div>
        <div @click="showHideOnBlur = true;getMoreCollage(collage.collageId,0);" class="c-fs22 c-fc-gray">全部拼团></div>
      </div>
      <div class="c-fs22 c-fc-gray c-pv28 c-bd-t1" v-if="collage.collageGroupType == 2 && collage.collageGrades && collage.collageGrades.length > 0">
        拼团类型：<span v-for="(item, index) in collage.collageGrades" :key="index">￥{{Number(item.price)}}/{{item.grade}}人团&nbsp;&nbsp;</span>
      </div>
      <div class="c-hh108 c-text-hidden" v-if="collage.collageGroup != null && collage.collageGroup.status == 2 && collageListLoop.length > 0">
        <div class="" :class="loopReset ? '' : 'c-transition-duration3-10'" :style="`transform: translateY(${transY}rem)`">
          <div v-if="collage.collageGroup != null && collage.collageGroup.status == 2" v-for="(item,index) in collageListLoop" :key="index" class="c-flex-row c-aligni-center c-justify-sb c-pb28">
            <img class="c-ww80 c-hh80 c-br40" :src="$addXossFilter(item.headUrl, require('../../../assets/defult_head.png'))" alt="">
            <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
              <div class="c-fs24 c-fc-xblack">还差<span class="c-fs24 fc-benefit">{{item.shortCount}}人</span>成团<span class="c-fs20 c-fc-xmlred bg-FF300C-op10 c-pv2 c-ph4 c-mr8 c-br8 c-fw600 c-ml12">{{item.clustering}}人团</span></div>
              <div class="c-fs20 c-fc-gray c-mt10">剩余<cj-clocker :time="item.endTime" format="%D天%H时%M分%S秒" @on-finish="onfinish(item, index)"></cj-clocker></div>
            </div>
            <div class="theme-bg c-fs22 c-fc-white c-ww110 c-hh44 c-br25 c-flex-row c-flex-center" @click="goCollageDetail(item.groupId,collage.collageId)">{{'去参团' | iosPayText(collage.prodType)}}</div>
          </div>
          <div v-if="collage.collageGroup != null && collage.collageGroup.status == 2 && collageListLoop[0]" class="c-flex-row c-aligni-center c-justify-sb c-pb28">
            <img class="c-ww80 c-hh80 c-br40" :src="$addXossFilter(collageListLoop[0].headUrl, require('../../../assets/defult_head.png'))" alt="">
            <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
              <div class="c-fs24 c-fc-xblack">还差<span class="c-fs24 fc-benefit">{{collageListLoop[0].shortCount}}人</span>成团<span class="c-fs20 c-fc-xmlred bg-FF300C-op10 c-pv2 c-ph4 c-mr8 c-br8 c-fw600 c-ml12">{{collageListLoop[0].clustering}}人团</span></div>
              <div class="c-fs20 c-fc-gray c-mt10">剩余<cj-clocker :time="collageListLoop[0].endTime" format="%D天%H时%M分%S秒" @on-finish="onfinish(collageListLoop[0], 0)"></cj-clocker></div>
            </div>
            <div class="theme-bg c-fs22 c-fc-white c-ww110 c-hh44 c-br25 c-flex-row c-flex-center" @click="goCollageDetail(collageListLoop[0].groupId,collage.collageId)">{{'去参团' | iosPayText(collage.prodType)}}</div>
          </div>
        </div>
      </div>
      <div class="c-pv24 c-bd-t1">
        <span class="c-fs22 c-fc-gray">玩法</span><span class="c-fs22 c-fc-gray c-ml26">开团/参团 - 邀请好友 - 满员成团（购买成功）</span>
      </div>
    </div>
    <div v-else>
      <div v-if="collage.status == 1" class="c-pv40 c-ph24 c-fs22 c-fc-xblack c-textAlign-c">当前活动还未开始，请耐心等待！</div>
      <div v-if="collage.status != 1 && collage.isCollageOnline == 1 && !isCourse" class="c-pv40 c-ph24 c-fs22 c-fc-xblack c-textAlign-c">当前没有可加入的拼团，快去<span class="fc-benefit">发起拼团</span>吧！</div>
      <div v-if="collage.status != 1 && collage.isCollageOnline == 1 && isCourse" class="c-pv20 c-ph24 c-flex-row c-aligni-center c-justify-sb">
        <div class="c-fs22 c-fc-xblack">当前没有可加入的拼团！</div>
        <div v-if="!hasExpired" @click="startCollage" class="c-fs22 c-fc-white theme-bg-gradient c-box-shadow7 c-ww124 c-hh44 c-flex-row c-flex-center c-br24">发起拼团</div>
        <div v-else class="c-fs22 c-fc-white c-bg-d7 c-box-shadow7 c-ww124 c-hh44 c-flex-row c-flex-center c-br24">发起拼团</div>
      </div>
    </div>
    <cj-popup v-model="showHideOnBlur" round class="c-w80">
      <h2 class="c-fw-n c-fs28 c-pv32 c-textAlign-c c-fc-xblack c-fw600">正在拼单</h2>
      <div class="c-ph24 c-maxh427 c-content-scroll c-scroll-touch" id="onBlurScroll">
        <div class="c-pv20 c-bd-b1 c-flex-column" v-for="(item,index) in collageList" :key="index" v-if="item.status == 2">
          <div class="c-flex-row c-justify-sb c-aligni-center c-pt12">

            <div class="c-flex-row c-flex-grow1 c-w0">
              <div class="c-ww96 c-hh96 c-p">
                <img :src="$addXossFilter(item.headUrl, require('../../../assets/defult_head.png'))" class="c-ww96 c-hh96 c-brp50" />
                <div class="c-pa c-p-b0 c-bg-white collage-name c-p-lp50">
                  <div class="collage-name c-pa c-p-b0 c-fs20 c-p-lp50 theme-fc c-fw600 mbcolor c-textAlign-c">{{item.clustering}}人团</div>
                </div>
              </div>
              <div class="c-flex-column c-hh96 c-justify-sa c-aligni-start c-ml16 c-flex-grow1 c-w0">
                <div class="c-fs24 c-fc-xblack c-flex-row c-aligni-baseline c-text-ellipsis1">
                  <div class="c-maxw160 c-text-ellipsis1">{{item.nickName}}</div>
                  <div class="c-fc-gray">
                    <span class="c-fs20">还差</span>
                    <span class="theme-fc">{{item.shortCount}}人</span>
                  </div>
                </div>
                <div class="c-fc-gray c-fs20 c-w100 c-text-ellipsis1" style="text-align: left !important;">剩余<cj-clocker :time="item.endTime" format="%D天%H时%M分%S秒" @on-finish="onfinish(item, index)"></cj-clocker></div>
              </div>
            </div>
            <div class="theme-bg c-fc-white c-fs24 c-ph24 c-pv12 c-br36" @click="goCollageDetail(item.groupId,collage.collageId)">{{'去拼团' | iosPayText(collage.prodType)}}</div>
          </div>
        </div>
        <div class="c-fs18 c-fc-sblack c-textAlign-c c-pv20" @click="getMoreCollage(collage.collageId,1)" v-if="is_collagePage">加载更多&nbsp;></div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
let loopInterval = null;
export default {
  name: "CollagePersonsList",
  components: {
  },
  props: {
    collage: {
      type: Object,
      default: null,
    },
    isCourse: {
      type: Boolean,
      default: false
    },
    hasExpired: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      collageList: [],
      collageListLoop: [],
      is_collagePage: false,
      collagePage: 1,
      limit: 10,
      showHideOnBlur: false,
      transY: 0,
      carouselCount: 0,
      loopReset: false,
      startLoop: false
    };
  },
  watch: {
    showHideOnBlur() { //展示全部拼团的时候禁止页面滚动
      if (this.showHideOnBlur) {
        // document.documentElement.style.overflowY = 'hidden'
        document.body.style.position = 'fixed';
      } else {
        // document.documentElement.style.overflowY = 'auto'
        document.body.style.position = 'static';
        document.getElementById('onBlurScroll').scrollTop = 0;
      }
    },
    collage: {
      handler(newObj, oldObj) {
        //获取选中的票券
        clearInterval(loopInterval);
        if (this.collage && this.collage.collageId && this.collage.collageGroup != null && this.collage.isCollageOnline == 1) {
          this.getMoreCollage(this.collage.collageId, 0);
          this.startLoop = true;
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    // 当倒计时结束时
    onfinish(item, listIndex) {
      this.collageList.forEach((val, index, arr) => {
        if (listIndex == index) {
          val.status = 3;
        }
      });
      let isHide = this.collageList.every(val => {
        return val.status == 3;
      })
      if (isHide) {
        this.showHideOnBlur = false;
      }
      this.collageListLoop = this.collageList.filter(item => {
        return item.status == 2;
      })
      if (this.collageListLoop.length < 2) {
        clearInterval(loopInterval);
        this.transY = 0;
      }
    },
    //跳转到拼团详情页
    goCollageDetail: function (groupId, collageId) {
      if (!utilJs.isOpenIosGzhPay(this.collage.prodType)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      document.body.style.position = 'static';
      this.$emit("goCollageDetail", {'groupId': groupId, 'collageId': collageId});
    },
    //获取此专栏的更多拼团
    getMoreCollage(collageId, isMore) {
      if (isMore == 0) {
        if (this.collageList.length > 0) {
          return;
        } else {
          this.collageList = [];
          this.collagePage = 1;
          this.is_collagePage = false;
        }
      }
      let $this = this;
      utilJs.getMethod(global.apiurl + 'collage/getSeeMore?page=' + this.collagePage + "&limit=" + this.limit + "&collageId=" + collageId, function (res) {
        if ($this.collagePage == 1) {
          $this.collageList = res.data;
        } else {
          let list = res.data;
          $this.collageList = $this.collageList.concat(list);
        }
        $this.collagePage = res.data && (res.data.length >= $this.limit) ? ($this.collagePage + 1) : $this.collagePage;//res.current_page < res.last_page ? ($this.collagePage + 1) : $this.collagePage;
        $this.is_collagePage = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page;
        $this.collageListLoop = $this.collageList.filter(item => {
          return item.status == 2;
        })
        if ($this.collageListLoop.length > 1 && $this.startLoop) {
          $this.startLoop = false;
          loopInterval = setInterval(() => {
            $this.loopReset = false;
            $this.carouselCount++;
            $this.transY = $this.transY - 2.7;
            if ($this.carouselCount == $this.collageListLoop.length) {
                setTimeout(() => {
                  $this.loopReset = true;
                  $this.transY = 0;
                  $this.carouselCount = 0;
                }, 1100);
            }
          }, 4000);
        }
      });
    },
    startCollage() {
      this.$emit('startCollage')
    }
  },
  activated() {
    this.collageList = [];
    this.collageListLoop = [];
    this.is_collagePage = false;
    this.collagePage = 1;
    this.showHideOnBlur = false;
  },
  deactivated() {
    clearInterval(loopInterval);
  },
  destroyed() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fc-benefit {
  color: #fc7033;
}
.collage-name {
  width: 1.8rem;
  height: .7rem;
  transform: translateX(-50%);
  border-radius: 14px;
}
.mbcolor {
  background-color: var(--rgba10color);
}
.c-transition-duration3-10 {
  transition:transform 1s;
  -webkit-transition:transform 1s; /* Safari and Chrome */
}
.bg-FF300C-op10 {
  background: rgba(255, 48, 0, 0.1);
}
</style>
